<template>
    <div id="app">
        <el-menu class="sidebar" mode="vertical">
            <el-menu-item v-for="(item, index) in items" :key="index" @click="selectItem(index,item.component)">
                {{ item.name }}
            </el-menu-item>
        </el-menu>

        <div class="content">
            <component :is="selectedComponent"></component>
        </div>

    </div>
</template>

<script>
import router from "@/router";
import UploadForm from "@/view/generalPage/uploadForm.vue";
import OperationForm from "@/view/generalPage/operationForm.vue";
import GetOwnAll from "@/view/generalPage/getOwnAll.vue";

export default {
    name: "generalHome",
    components:{
        OperationForm,
        UploadForm,
        GetOwnAll
    },
    data() {
        return {
            items: [
                {name: '填写表单',component: 'OperationForm'},
                {name: '上传表单',component: 'UploadForm'},
                {name: '我的表单',component: 'GetOwnAll'}
            ],
            selectedComponent: 'OperationForm'
        };
    },
    methods: {
        selectItem(index, component) {
            if(component === 'factoryStandThreeWorkOrder'){
                router.push('/'+component)
            }
            // router.push('/' + component)
            this.selectedComponent = component
        },
    },
}
</script>

<style scoped>
#app {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 200px;
}

.content {
    flex-grow: 1;
    padding: 20px;
}
</style>